昨天討論了單向資料流的鬍子語法，可以讓我們把Vue實例裡的資料流向html (View)。
但如果要將資料綁定HTML標籤屬性的時候，該怎麼辦呢？
舉例而言，如果我們想把HTML的placeholder綁上vue instance的data屬性yourname，這個時候，我們可以使用v-bind。

單向資料綁定: v-bind

範例：在這個輸入格的placeholder提示上綁v-bind:placeholder="yourname"，就會出現請輸入您的暱稱的提示字串了。請看我的JS fiddle範例

雙向事件處理: v-model, v-on

如果我想要讓使用者輸入暱稱時，使用v-model讓暱稱可以即時顯示。
並且讓使用者按下button時，呼叫thankyou這個methods裡面的方法～這樣該如何是好呢？

在上例表單的情況，Vue的黑魔法讓this可以拿到inputname裡的值，
所以我們可以透過${this.inputname}要到使用者的輸入資料，並在畫面上顯示，達成資料回流到Vue instance的效果。請看我的JS fiddle範例

v-bind和v-on的簡寫

因為v-bind和v-on太有用啦，所以有他自己的語法糖衣syntax sugar！

• 資料綁定v-bind :
• 事件處理v-on @

Vue其實還有其他好用的設計像是v-for把陣列裡的資料印出來, v-if, v-show 流程控制。這個部分跟一般程式語言的邏輯還蠻相似的，各位可以參考vue官網範例，暫時不一一贅述。明天將會介紹v-on跟method結合，以及更多變化的computed()屬性！

Ref:

• Vue手冊：v-on事件處理
• 書籍：Vue.js 2 前端漸進式建構框架實戰應用